<script setup lang="ts">
  import { ref } from 'vue';
  import TopInput from './components/top-input.vue';
  import TopSendTable from './components/top-sendTable.vue';
  import TopBackTable from './components/top-BackTable.vue';

  const tableData = ref([]);
  const topInputRef = ref<InstanceType<typeof TopInput> | null>(null);
  const msgId = ref('');
  function sendSearch() {
    if (topInputRef.value) {
      topInputRef.value.handleSearch();
    }
  }
</script>

<template>
  <div class="flow-query">
    <a-card>
      <template #title>
        <div class="card-title">erp日志</div>
      </template>
      <div class="content">
        <TopInput ref="topInputRef" @update-array="tableData = $event" />
        <a-divider style="margin-bottom: 8px" />
        <TopSendTable
          :table-data="tableData"
          @resend-search="sendSearch"
          @send-msgid="msgId = $event"
        />
        <a-divider style="margin-bottom: 8px" />
        <TopBackTable :msg-id-data="msgId" />
      </div>
    </a-card>
  </div>
</template>

<style scoped>
  .flow-query {
    margin: 0px;
    padding: 10px;
    height: 100%;
  }
  .card-title {
    font-size: 24px;
  }
  .content {
    display: flex;
    flex-direction: column;
  }
</style>
